import { defineComponent, ref, h } from "vue";
import type { VNodeChild } from 'vue'
import { NInput, NDropdown, NButton, } from "naive-ui"
import type { DropdownOption } from 'naive-ui'
import Moren from "./moren"
import { useRouter } from "vue-router";
export default defineComponent({
    name: "Mywiki",
    setup() {
        const router = useRouter()
        // 分类列表
        const fenleiList = ref([
            {
                label: "首页", key: "index", desc:"1231231231231231231",children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
            {
                label: "首页", value: "index", desc:"1231231231231231231",children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
            {
                label: "首页", value: "index",desc:"1231231231231231231", children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
            {
                label: "首页", value: "index", desc:"1231231231231231231",children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
            {
                label: "首页", value: "index", desc:"1231231231231231231",children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
            {
                label: "首页", value: "index",desc:"123123123123123111111231", children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
            {
                label: "首页", value: "index", desc:"1231231231231123123123123123123123123123123123123123231231",children: [
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                    { label: "测试01", key: "1231" },
                ],
            },
        ])
        // 点击下拉菜单
        const handleSelect = () => {
        }
        // 指定下拉菜单的渲染方式
        const renderDropdownLabel = (option: DropdownOption) => {
            if (option.type === 'group') {
                return option.label as VNodeChild
            }
            return h(
                'span',
                {
                    href: '',
                    target: '_blank',
                    style: { "color": "#57c3c2" },
                },
                {
                    default: () => option.label as VNodeChild
                }
            )
        }
        // 点击返回
        const fanhui = () => {
            router.push({ name: "Main" })
        }
        return () => (<div class="w-screen h-screen relative">
            <div class="absolute top-0 left-0 w-full h-60px flex justify-between items-center  shadow-lg border-b border-gray-300">
                <div class="w-200px h-full juzhong1 cursor-pointer hover:text-blue-400">
                    <span class="select-none font-semibold text-30px leading-30px font-serif">我的 </span>
                    <span class="select-none font-semibold text-30px  leading-30px font-serif">WIKI</span>
                </div>
                <div class="w-300px h-full juzhong1">
                    <NInput placeholder={"请输入搜索关键字"} />
                </div>
                <div class="h-full px-2 juzhong1">
                    {fenleiList.value.map(item => {
                        return <div class="px-2">
                            <NDropdown trigger={"hover"} options={item.children} onSelect={handleSelect} render-label={renderDropdownLabel}>
                                <span class="cursor-pointer" style={{ "color": "#57c3c2" }}>{item.label}</span>
                            </NDropdown>
                        </div>
                    })}
                    <div class="px-2">
                        <span class="cursor-pointer" style={{ "color": "#57c3c2" }} onClick={fanhui}>回去</span>
                    </div>
                </div>
            </div>
            <div class="absolute top-60px left-0 right-0 bottom-0 overflow-x-hidden overflow-y-auto">
                <router-view>
                    <Moren menuList={fenleiList.value} />
                </router-view>
            </div>
        </div>)
    },
})
